<template>
  <!-- 客户管理 -->
  <!-- 核心企业管理 -->
  <div v-if="boolobox">
    <!-- 搜索按钮 -->
    <div class="top_bar">
      <div class="left">
        <!-- 下拉菜单 -->
        <el-dropdown>
          <el-button
            class="zhuangtai first"
            type="primary"
            style="background-color: white; border-color: gray; color: gray"
          >
            企业名称<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>全部</el-dropdown-item>
              <el-dropdown-item>启用</el-dropdown-item>
              <el-dropdown-item>禁用</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- 搜索框  -->
        <el-input
          v-model="input4"
          class="w-50 m-2"
          placeholder="请输入要查询的核心企业名称"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>

        <el-button type="primary" class="zhuangtai btn">查询</el-button>
        <el-button class="zhuangtai btn btn1">重置</el-button>
      </div>
      <div class="right" @click="dialogFormVisible = true">
        <el-button class="zhuangtai btn btn1" @click="dialogFormVisible = true"
          ><el-icon><DocumentChecked /></el-icon>导出</el-button
        >
        <el-button class="zhuangtai btn btn1" @click="addbtn"
          ><el-icon><Plus /></el-icon>新增</el-button
        >
      </div>
    </div>
    <!-- 表格数据 -->
    <el-table :data="tableData1" stripe style="width: 100%">
      <el-table-column prop="序号" label="序号" width="180">
        <!-- 组件插槽 -->
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="企业名称" width="180" />
      <el-table-column prop="shehui" label="社会信用代码" />
      <el-table-column prop="money" label="注册资本" />
      <el-table-column prop="laiyuan" label="客户来源" />
      <el-table-column prop="time" label="更新时间" />
      <el-table-column prop="caozuo" label="操作">
        <template #default="scope">
          <!-- <el-button type="danger" @click="handleDelete(scope.row.adminid)">Delete</el-button> -->
          <div class="iconbtn">
            <el-icon><Edit /></el-icon>
            <el-icon><View /></el-icon>
            <el-icon><Delete /></el-icon>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    />
  </div>
  <!-- 点击新增按钮弹出页面 -->
  <div class="newdom" v-else>
    <h3>新增客户信息</h3>
    <div class="zui" >
      <div class="box">
     <div class="top">
      <div class="one">
      </div>
      <div class="two">
      
    <el-tabs
      v-model="activeName"
      type="border"
      class="demo-tabs"
      @tab-click="handleClick"
      stretch
    >
      <el-tab-pane label="基本信息" name="first" >
  
        <!-- 基本信息内容 -->
      
      <div class="body">
    <el-table :data="tableData" border height="40px"  size="40" scrollbar-always-on="false" style="width: 100%"  >
          <el-table-column prop="date"    width="150" />
          <el-table-column prop="name"  width="150" />
          <el-table-column prop="state"  width="150"/>
          <el-table-column prop="city"  width="150" />
          <el-table-column prop="address"   />
          <el-table-column prop="zip"  width="200" />
    </el-table>
    <el-table :data="tableData" border height="40px"  size="40" scrollbar-always-on="false" style="width: 100%"  >
          <el-table-column prop="date"   width="150" />
          <el-table-column prop="name"  width="150" />
          <el-table-column prop="state"  width="150"/>
          <el-table-column prop="city"  />
         
    </el-table>
    <el-table :data="tableData" border height="40px"  size="40" scrollbar-always-on="false" style="width: 100%"  >
          <el-table-column prop="date"   width="150" />
          <el-table-column prop="name"  width="150" />
          <el-table-column prop="state"  width="150"/>
          <el-table-column prop="city"  width="150" />
          <el-table-column prop="address"   />
          <el-table-column prop="zip"  width="200" />
    </el-table>
    <el-table :data="tableData" border height="40px"  size="40" scrollbar-always-on="false" style="width: 100%"  >
        
          <el-table-column prop="city"   />
          <el-table-column prop="address"   />
          <el-table-column prop="zip"   />
    </el-table>
    <el-table :data="tableData" border height="40px"  size="40" scrollbar-always-on="false" style="width: 100%"  >
        
          <el-table-column prop="city"   />
          <el-table-column prop="address"   />
          <el-table-column prop="zip"   />
    </el-table>
    <el-table :data="tableData" border height="40px"  size="40" scrollbar-always-on="false" style="width: 100%"  >
          <el-table-column prop="date"   width="150" />
          <el-table-column prop="name"  width="150" />
          <el-table-column prop="state"  width="150"/>
          <el-table-column prop="city"  />
         
    </el-table>
    <el-table :data="tableData" border height="40px"  size="40" scrollbar-always-on="false" style="width: 100%"  >
          <el-table-column prop="date"   width="150" />
          <el-table-column prop="name"  width="150" />
          <el-table-column prop="state"  width="150"/>
          <el-table-column prop="city"  width="150" />
          <el-table-column prop="address"   />
          <el-table-column prop="zip"  width="200" />
    </el-table>
  
    <div class="fa">
        法定代表人信息
       </div>
    <el-table :data="tableData" border height="40px"  size="40" scrollbar-always-on="false" style="width: 100%"  >
          <el-table-column prop="date"   width="150" />
          <el-table-column prop="name"  width="150" />
          <el-table-column prop="state"  width="150"/>
          <el-table-column prop="city"  width="150" />
          <el-table-column prop="address"   />
          <el-table-column prop="zip"  width="200" />
    </el-table>
    <el-table :data="tableData" border height="40px"  size="40" scrollbar-always-on="false" style="width: 100%"  >
          <el-table-column prop="date"   width="150" />
          <el-table-column prop="name"  width="150" />
          <el-table-column prop="state"  width="150"/>
          <el-table-column prop="city"  width="150" />
          <el-table-column prop="address"   />
          <el-table-column prop="zip"  width="200" />
    </el-table>
  
    <div >
       <div class="wei">
        <div class="zi">
          联系方式
        </div>
        <div class="tian">
          <el-button class="chong">+新增</el-button>
        </div>
       </div>
       </div>
       <el-table class="tou" :data="admin" stripe style="width:100%; " >
          <el-table-column prop="" label="序号">
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="adminname" label="企业名称">
            <template>
  
            </template>
          </el-table-column>
          <el-table-column prop="role" label="社会信用代码">
            <template #default="scope">
              <el-tag class="ml-2" type="success">{{ scope.row.role == 1 ? '普通管理员' : '超级管理员' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="" label="注册资本">
           
          </el-table-column>
          <el-table-column prop="" label="业务员">
           
          </el-table-column>
          <el-table-column prop="" label="流程状态">
           
          </el-table-column>
          <el-table-column prop="" label="任务开始时间">
            
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template >
              <img class="one" src="../../assets/gjc01.svg" alt="">
              <img class="three" src="../../assets/gjc03.svg" alt="">
              <img class="two" src="../../assets/gjc02.svg" alt="">
            </template>
          </el-table-column>
        </el-table>
      </div>
      </el-tab-pane>
      <el-tab-pane label="资产负债表"><h4>资产负债表</h4></el-tab-pane>
      <el-tab-pane label="利润表"><h4>利润表</h4></el-tab-pane>
      <el-tab-pane label="现金流量表"><h4>现金流量表</h4></el-tab-pane>
      <el-tab-pane label="股东信息"><h4>股东信息</h4></el-tab-pane>
      <el-tab-pane label="管理团队"><h4>管理团队</h4></el-tab-pane>
      <el-tab-pane label="银行账户信息"><h4>银行账户信息</h4></el-tab-pane>
      <el-tab-pane label="企业信用概况"><h4>企业信用概况</h4></el-tab-pane>
      <el-tab-pane label="涉诉信息"><h4>涉诉信息</h4></el-tab-pane>
    </el-tabs>
  
      </div>
     </div>
     <div class="button">
      <el-button>保存</el-button>
      <el-button>提交</el-button>
      <el-button @click="back" >返回</el-button>
     </div>
    </div>
    </div>
    
  </div>
</template>

<script setup>
// import service from "@/api";
import { ref } from "vue";
// 分页内容
var currentPage4 = ref(1);
var pageSize4 = ref(10);

var tableData1 = [
  {
    name: "牛马11111有限公司",
    shehui: "91110000100010433L",
    money: "100,000",
    laiyuan: "xxx",
    time: "yyy",
  },
  {
    name: "牛马11111有限公司",
    shehui: "91110000100010433L",
    money: "100,000",
    laiyuan: "xxx",
    time: "yyy",
  },
  {
    name: "牛马有限公司",
    shehui: "91110000100010433L",
    money: "100,000",
    laiyuan: "xxx",
    time: "yyy",
  },
];
const admin = [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]
  const tableData = [
    {
      date: '2016-05-03',
      name: '',
      state: '',
      city: 'Los ',
      address: '',
      zip: ' ',
    },
  ]

/* 新增弹出对话框 */
var boolobox = ref(true);
var addbtn = () => {
  boolobox.value = false;
};
var back = () => {
  boolobox.value = true;
};
</script>

<style scoped lang="scss">
.top_bar {
  display: flex;
  justify-content: space-between;
  .input {
    min-width: 250px;
  }
  .left {
    height: 40px;
    display: flex;
    justify-content: space-between;
  }
  .zhuangtai {
    height: 100%;
    margin: 0 10px;
  }

  .btn1 {
    color: #4aa5fe;
    border-color: #4aa5fe;
  }
  .first {
    border: none;
  }
}
.btn {
  width: 100px;
}
// 表格
.is-scrolling-none {
  margin-top: 30px;
}
.iconbtn {
  width: 150px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  line-height: 32px;
  cursor: pointer;
}
/* 分页样式 */
.el-pagination {
  margin-top: 20px;
  position: absolute;
  left: 50%;
  transform: translate(-33%, 50%);
}
.el-dialog {
  height: 600px;
}
.newdom {
  position: relative;
  z-index: 99;
  width: 100%;
//   height: 100%;
  background-color: rgb(253, 252, 252);
  .flxed {
    position: fixed;
    bottom: 288px;
    right: -70%;
    width: 100%;
    height: 50px;
.el-button{
    width: 100px;
    z-index: 99;
    background-color:rgb(187, 199, 240);
}
  }
}

h4 {
  margin: 0;
  padding: 0;
}
// 新增页面

.zui{
    width: 100%;

  }
  .box{
    // width: 90%;
    height: 90%;
    background-color: white;
    // margin: auto;
  }
  
  :deep(.el-tabs__item) {
    width: 100px;
    height: 28px;
  }
  :deep(.el-tabs__nav-wrap::after){
    height: 0px;
  }
  :deep(.el-tabs__item.is-active) {
    color:white ;
    background-color: rgb(78, 171, 254);
    text-align: center;
    border-radius: 5px;
   
  }
  :deep(.el-tabs__item ){
    text-align: center;
    margin: auto;
    width: 100px;
    font-size: 10px;
    font-weight: bolder;
  }
  :deep(.el-tabs__nav ){
    width:1000px;
    margin-left: 40px;
  }
  :deep(.el-table--border th.el-table__cell){
    display: none;
  }
  .wei{
      width: 80%;
      margin: auto;
      font-size: 12px;
  }
  
  .one{
      position: relative;
  }
  .three{
      position: absolute;
      left: 18px;
      top: 15px;
  }
  .wei .zi{
    font-size: 16px;
    line-height: 32px;
    margin-left: -50px;
  
  }
  .wei{
    display: flex;
  }
  .wei .el-button{
    margin-left: 50px;
  }
  .ji{
    font-size: 12px;
    margin-bottom: 10px;
  }
  .fa{
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 12px;
  }
  .two{
    height: 100%;
  }
  :deep(.el-tabs--top){
    height: 100%;
  }
  .wei{
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    margin-left: 50px;
  }
  .wei .zi{
    font-size: 12px;
    
  }
  .wei .el-button{
    height: 25px;
    width: 50px;
    line-height: 30px;
    border: 1px solid blue;
    color: blue;
    margin-top: 3px;
  }
  .button{
    width: 100%;
    display: flex;
    z-index: 20;
    background-color: white;
    justify-content: flex-end
  }
   .button .el-button{
    border: 1px solid gray;
    width: 120px;
  }
  .top .body{
    overflow-y: auto;
    width: 100%;
    height: 500px;
  }
  :deep(.el-tabs__nav-next){
    line-height: 31px;
    position: absolute;
    font-size: 32px;
    color: blue;
    width: 20px;
    text-align: center;
}
 :deep(.el-tabs__nav-prev) {
    line-height: 31px;
    position: absolute;
    font-size: 32px;
    color: blue;
    width: 20px;
    text-align: center;
}
.top{
    height: 100%;
}
.body .top{
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
    text-align: center;
}
:deep(.el-tabs__content){
    height: 100%;
}
.body .top h3{
    font-size: 14px;
}
.body .top p{
    font-size: 12px;
    margin-top: -5px;
}
.body .button {
    display: flex;

}
.body .zhong {
    display: flex;
    font-size: 12px;
      height: 20px;
      /* background-color: black; */
}
.body .zhong .aa{
   margin-left: 120px;
   
}
.body .zhong .bb{
   margin-left: 120px;
}
.body .zhong .cc{
   margin-left: 0px;
}
.body .zhong .dd{
   margin-left: 50px;
}
.body .button .left{
    width: 50%;
   
    height: 100px;
  
}
.body .button .right{
    width: 50%;
   
    height: 100px;
   
}
</style>